<template>
  <div class="app-container">

     <el-card class="box-card"   shadow="never">
       <el-row>
         <el-col :span="6">
           <!-- 显示在线列表数-->
           <el-row>
            <el-col :span="16">
              <div class="number">设备列表</div>
            </el-col>
            <el-col :span="8" style="text-align: center;">
              <el-button type="primary" icon="el-icon-refresh" @click="refreshDevice()"  size="mini"></el-button>
            </el-col>
           </el-row>

           <!--设备列表 -->
           <el-table ref="singleTable" :data="tableData"  style="width: 90%;margin-top: 15px;"  highlight-current-row   @current-change="handleCurrentChange" :row-class-name="tableRowClassName">>
               <el-table-column  prop="deviceCode" label="设备编号" > </el-table-column>
                <el-table-column  prop="realTimeState" label="状态" > </el-table-column>
            </el-table>
         </el-col>

         <!-- 右边框 -->
         <el-col :span="18">
           <!-- 上边 报警数据-->
           <Alarm :device_id="currentRow?currentRow.deviceId:0"></Alarm>


           <!-- 下边指令回复表格 -->
           <OrderHistory :device_id="currentRow?currentRow.deviceId:0"></OrderHistory>

         </el-col>
       </el-row>


    </el-card>

  </div>
</template>

<script >
  import {listApi} from '@/api/hat/device.js'
  import { Loading } from 'element-ui'; 
  //自定义组件-报警数据
  import Alarm from '@/components/Device/Alarm.vue'
  //自定义组件-指令发送回复的历史记录
  import OrderHistory from '@/components/Device/OrderHistory.vue'
  //自定义动态加载
  var downloadLoadingInstance;

  export default {
    name: "views",
    components: { 
      Alarm,
      OrderHistory
    },
    data () {
      return {
        //表格单选状态
        currentRow: null,
        queryParams: {

        },
        tableData: [
        ],
      };
    },
    methods: {
      //点击左边表格
      handleCurrentChange (val) {
        console.log(val)
        this.currentRow = val;
      },
      //重新加载设备列表
      refreshDevice () {
        this.setCurrent()
        this.currentRow = undefined
        this.fetchDeviceList()
      },
      fetchDeviceList () {
        downloadLoadingInstance = Loading.service({ text: "正在查询设备，请稍后", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })

        listApi().then(resp => {
          this.tableData = resp.data
          //创建地图点
          //this.createMarker()
          //关闭动画
          downloadLoadingInstance.close();

        }).catch(e => {
          //关闭动画
          downloadLoadingInstance.close();
        })
      },
      tableRowClassName ({ row, rowIndex }) {
        if (row.realTimeState === '离线') {
          return 'danger-row';
        } else {
          if (row.realTimeState === '正常') {
            return '';
          } else if (row.stats === '2') {
            return 'warning-row';
          } else if (row.status === '1') {
            return 'warning-row';
          }
        }
        return '';
      },
    },
    computed: {
      deviceNum () {
        return this.tableData.filter(p => p.realTimeState === "正常").length;
      }
    },
    created() {
      this.fetchDeviceList()
    }

  }


</script>

<style>
</style>
